import FirstTitle from "@/components/FirstTitle";
import SubTitle from "@/components/subTitle";
import Code from "@/components/code";
import EffectContainer from "@/components/effectContainer";

import QRCode from "react-qr-code";
import { useEffect, useState } from "react";
import { Input } from "antd";
import { getCode } from "@/api/codeApi.ts";
import { Description } from "@/components/description";

export const QrCode = () => {
  const [value, setValue] = useState("");
  const [url, setUrl] = useState("www.baidu.com");
  const handlerEnter = () => {
    setUrl(value);
  };
  const handlerChange = (e) => {
    setValue(e.target.value);
  };

  const [code, setCode] = useState("");
  useEffect(() => {
    getCode("/qrcode/二维码.txt").then(({ data }) => {
      setCode(data);
    });
  }, []);
  return (
    <>
      <FirstTitle title="react-qr-code"></FirstTitle>

      <Description info={"使用 react-qr-code 生成二维码"}></Description>

      <SubTitle title="二维码效果"></SubTitle>

      <EffectContainer
        effect={
          <div
            style={{
              margin: "0 auto",
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              gap: "10px",
              width: "100%",
              height: "200px",
            }}
          >
            <Input
              type="text"
              allowClear
              addonBefore="链接"
              placeholder={value}
              onChange={handlerChange}
              onPressEnter={handlerEnter}
            />
            <QRCode
              size={256}
              style={{ height: "auto", maxWidth: "100%", width: "100%" }}
              value={url}
              viewBox={`0 0 256 256`}
            />
            <p>回车生成二维码链接: {url}</p>
          </div>
        }
        code={<Code content={code}></Code>}
      ></EffectContainer>
    </>
  );
};
